<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<ul id="box"></ul>
		<script type="text/javascript">
			$.ajax({
				type:"get", //必填 get post 请求
				url:"json/data.json", // 必填 地址
				async:true,//默认 true 请求是否异步 true 是异步
				success: function(data){//请求到数据后的回调函数
					//从这一行开始你可以对得到的数据做一些猥琐的事情
					console.log('这是你得到的数据:')
					console.log(data)
					for(var i = 0 ;i<data.length;i++){
						var aLi = document.createElement('li')//创建li标签
						var aSpan = document.createElement('span')//创建span标签
						var oUl = document.getElementById('box')//获取ul
						var aI = document.createElement('i')//创建i标签
						for(key in data[i]){
							console.log('key 是属性的值')
							console.log(key)
							console.log('这是key对应的值：\n'+data[i][key])
							aSpan.innerHTML = key
							aI.innerHTML = data[i][key]
							aLi.appendChild(aSpan);//添加i标签并放入li
							aLi.appendChild(aI); //添加span标签并放入li
							oUl.appendChild(aLi)//添加li标签到并放入ul
						}
					}
					
				}
			});
		</script>
		
	</body>
</html>
